<% layout( 'admin_layout') -%>

    <div id="wrapper" class="wrapper">
        <nav class="navbar" style="background-color: #3BBFB4;">
            <div class="container-fluid">
                <div class="raw">
                    <div class="col-sm-6 col-xs-6">
                        <h3 style="margin-left:50px;color:#fff;">博文列表</h3>
                    </div>
                    <div class="col-sm-6 col-xs-6">

                        <div class="box" style="float:right;margin-top: 10px;margin-right:5%;">
                            <div class="demo  btn btn-success">

                                <a href="/admin/artcreate" style="color:#fff">新建博文</a>
                            </div>


                        </div>
                        <!-- HBox end -->
                    </div>
                </div>
            </div>
        </nav>
    </div>

    <div class="container">

        <div class="raw">
            <section class="col-sm-4 col-xs-12">
                <div class="col-sm-12 col-xs-12" style="height:505px;overflow-y:auto;border:thin #ccc solid;padding:0px;">
                    <div class="list-group">
                        <%for(var i = 0;i<articles.length;i++){%>

                            <a id="<%=articles[i]._id%>" class="list-group-item" onclick="show('<%=articles[i]._id%>');">
                                <h3 class="entry-title"><%=articles[i].title%></h3>
                                <section class="entry-meta" style="margin-bottom:5px;">
                                    <span class="author"><%=articles[i].author.nickname%></span>
                                    <span class="status">
								<time class="date published" datetime="<%=articles[i].created%>">
									发布于 1 天前
								</time>
							</span>
                                </section>
                            </a>
                            <%}%>


                    </div>
                </div>
            </section>
            <section class="col-sm-8 col-xs-0">
                <div id="preview" style="height:505px;overflow-y:auto;">
                    <a href="/admin/artupdata" style="float:right;margin-top:30px;z-index:1">
                        <span id="charnum" class="label label-default"><i class="glyphicon glyphicon-pencil"></i></span>
                    </a>

                    <div id="article" class="wrapper" style="border:thin #ccc solid;height:505px;">
                        <h2><%=articles[0].title%></h2>
                        <div class="art">
                            <%-articles[0].html%>
                        </div>
                    </div>
                </div>

            </section>

        </div>

    </div>


    <footer class="site-footer clearfix" style="margin-top:0px;">
        <section class="copyright">
            <a href="/" style="margin-bottom:0px;">
                <%=global.name%>
            </a> © 2016</section>
    </footer>
    <script>
        $(function() {
            localStorage._id = "<%=articles[0]._id%>";
            $('#' + localStorage._id).addClass("active");
        })
        var menu = new Menu;

        function show(_id) {

            $.ajax({
                type: "POST",
                cache: false,
                url: "/api/article/findbyid",
                data: {
                    id: _id
                },
                success: function(msg) {
                    if (msg.status == 0) {
                        $('#article').empty();
                        $('#article').append("<h2>" + msg.msg.title + "</h2>");
                        $('#article').append("<div class='art'>" + msg.msg.html + "</div>");
                        $('#' + localStorage._id).removeClass("active");
                        localStorage._id = msg.msg._id;
                        $('#' + _id).addClass("active");

                    }


                }
            });
        }
    </script>